<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="js/表单.js"></script>
    
    <link type="text/css" rel="stylesheet" href="css/表单.css">
</head>
<body>
    <div class="Form">
        <div class="innerBox">
            <div>登录代码</div>
            <input type="text" class="middle" id="usr" placeholder="请输入登录代码">
            <span class="right">*</span>
        </div>
        <div>
            <div id="notice1">首字符只能输入字母，其余字符可以为字母数字，长度为6-20个字符</div>
        </div>
        <div class="innerBox">
            <div>登录密码</div>
            <input type="text" class="middle" id="pwd" placeholder="最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符">
            <span class="right">*</span>
        </div>
        <div>
            <div id="notice2">密码不允许为空，只能输入字母，为且只能输入3位内数字</div>
        </div>
        <div class="innerBox">
            <div>昵称</div>
            <input type="text" class="middle" placeholder="请输入您的昵称">
            <span class="right">&nbsp;</span>
        </div>
        <div class="innerBox">
            <div>性别</div>
            <div id="sex">
                <input type="radio" name="radio" value="男">男
                <input type="radio" name="radio" value="女">女
            </div>
            <span class="right">&nbsp;</span>
        </div>
        <div class="innerBox">
            <div>年龄</div>
            <input type="text" class="middle" id="age" placeholder="请输入您的年龄">
            <span class="right">*</span>
        </div>
        <div>
            <div id="notice3">年龄不允许为空，只能输入字母，为且只能输入3位内数字</div>
        </div>
        <div class="innerBox">
            <div>电话号码</div>
            <input type="text" class="middle" id="phonenumber" placeholder="请输入您的电话号码">
            <span class="right">*</span>
        </div>
        <div>
            <div id="notice4">电话号码不允许为空，且需要为有效号码</div>
        </div>
        <div class="innerBox">
            <div>邮箱</div>
            <input type="text" class="middle" id="email" placeholder="请输入您的邮箱">
            <span class="right">*</span>
        </div>
        <div>
            <div id="notice5">邮箱不允许为空，且需要为合法邮箱</div>
        </div>
        <div class="innerBox">
            <div>&nbsp;</div>
            <input type="button" value="注册" id="zc">
        </div>
    </div>
</body>
</html>